<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环指令</title>
</head>
<body>
<div id="div">
    <li v-for="name in names"><!--这个是要遍历names这个数组，插值表达式中会展示数组中的每一个name-->
        {{name}}
    </li>
    <li v-for="(name , index) in names"><!--这个(name , index)除了展示数组的元素外，第二个参数还会展示元素的索引号,这里的取值是根据位置来获取的，第一个是值，第二个是变量名-->
        {{name}}--{{index}}
    </li>
    <li v-for="(value,key) in student"><!--这个是要遍历对象的所有属性，注意，属性的变量名只能是value-->
        {{value}}--{{key}}
    </li>
    <li v-for="(value,key) in studentList"><!--这个是要遍历对象的所有属性，注意，属性的变量名只能是value-->
        {{value.name}}--{{value.age}}
    </li>
    <table>
        <tr>
            <td>用户名</td>
            <td>年龄</td>
        </tr>
        <tr v-for="value in studentList"><!--做一个简单的列表展示-->
            <td >{{value.name}}</td>
            <td >{{value.age}}</td>
        </tr>
    </table>
</div>
</body>
<script src="js/vuejs-2.5.16.js"></script>
<script>
    new Vue({
        el: "#div",
        data: {
            names: ["黄金标", "白翻译", "贾队长"],//这个数据是一个数组
            student: {//这是一个对象
                name: "黄金标",
                age: 33
            },
            studentList:[
                { name: "蔡水根",
                    age: 23},
                { name: "孙友福",
                    age: 33},
                { name: "杨保禄",
                    age: 32}
            ]
        }
    });
</script>
</html>